<template>
  <div class="container">
    <a-card class="general-card" :title="$t('menu.system.agency-management')">
      <approve-button-group></approve-button-group>
      <a-space direction="vertical" size="large">
        <a-radio-group v-model="position" type="button">
          <a-radio value="1">我的待办</a-radio>
          <a-radio value="2">我的已办</a-radio>
          <a-radio value="3">我的申请</a-radio>
          <a-radio value="4">我的待阅</a-radio>
          <a-radio value="5">废件箱</a-radio>
        </a-radio-group>
      </a-space>
    </a-card>
    <Agency v-if="position === '1'" ref="content" position="我的待办"></Agency>
    <HaveDone
      v-if="position === '2'"
      ref="content"
      position="我的已办"
    ></HaveDone>
    <ApplyFor
      v-if="position === '3'"
      ref="content"
      position="我的申请"
    ></ApplyFor>
    <WaitReading
      v-if="position === '4'"
      ref="content"
      position="我的待阅"
    ></WaitReading>
    <WasteBox
      v-if="position === '5'"
      ref="content"
      position="废件箱"
    ></WasteBox>
    <!-- <a-tabs type="capsule" @change="Refresh">
      <a-tab-pane key="1" title="我的待办">
        <Agency ref="content" position="我的待办"></Agency>
      </a-tab-pane>
      <a-tab-pane key="2" title="我的已办">
        <HaveDone ref="content" position="我的已办"></HaveDone>
      </a-tab-pane>
      <a-tab-pane key="3" title="我的申请">
        <ApplyFor ref="content" position="我的申请"></ApplyFor>
      </a-tab-pane>
      <a-tab-pane key="4" title="我的待阅">
        <WaitReading ref="content" position="我的待阅"></WaitReading>
      </a-tab-pane>
      <a-tab-pane key="5" title="废件箱">
        <WasteBox ref="content" position="废件箱"></WasteBox>
      </a-tab-pane>
    </a-tabs> -->
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Agency from './components/agency.vue';
  import HaveDone from './components/have-done.vue';
  import ApplyFor from './components/apply-for.vue';
  import WaitReading from './components/wait-reading.vue';
  import WasteBox from './components/waste-box.vue';

  const position = ref('1');
  const content = ref();
</script>

<style scoped lang="less">
  .container {
    padding: 10px 10px 20px 10px;
    .chart-list {
      flex-flow: row nowrap;
      justify-content: center;
    }
  }
  :deep(.arco-tabs-nav-tab) {
    display: block;
  }
</style>
